<template>
	<image
		v-if="src"
		:style="{width:`calc(var(--amplified_base) * ${width}rpx)`,height:`calc(var(--amplified_base) * ${height}rpx )`}"
		:src="src"
		:class="{'circle':appSetting.circleAvatar}"
		mode=""
	></image>
</template>

<script>
	import pinia from "@/store/index";
	import { useloginStore } from "@/store/login";
	const userStore = useloginStore(pinia);
	export default {
		name: "user-avator",
		props: {
			src: {
				type: String,
				require: true,
				default: () => "",
			},
			width: {
				type: Number,
				default: () => 80,
			},
			height: {
				type: Number,
				default: () => 80,
			},
		},
		data() {
			return {
				appSetting: userStore.appSetting,
			};
		},
	};
</script>

<style lang="scss">
	image {
		border-radius: calc(var(--amplified_base) * 16rpx);
	}
	.circle {
		border-radius: 50%;
	}
</style>
